<template>
    <view class="content">
        <view class="bg">
            <view class="teamHeader flex flex-align flex-bt">
                <view class="teamHeaderLeft flex flex-align">
                    <image :src="datainfo?.headimg" mode="scaleToFill" />
                    <view class="teamHeaderLeftText">
                        <view class="name">{{ datainfo?.nickname }}</view>
                        <view class="num_list flex flex-align">
                            <view class="list">ID：{{ datainfo?.id }}</view>
                            <view class="list">邀请码：{{ datainfo?.inviter_code }}</view>
                        </view>
                    </view>

                </view>
                <view class="teamHeaderRight" @click="openshare">
                    <image src="/static/teamcenter/center01.png" mode="scaleToFill" />
                </view>
            </view>
            <view class="dayshuju">
                <view class="homeTitle flex flex-align">
                    <text></text>
                    本日数据
                </view>
                <view class="shuList flex flex-align">
                    <view class="shuListItem" @click="goUrl('/pagesA/liveLog/liveLog?type=1',true)">
                        <view class="shuListText"> 今日观播人数 </view>
                        <view class="shuListNum"> {{ centerInfo?.today_user_look }} </view>
                    </view>
                    <view class="shuListItem" @click="goUrl('/pagesA/liveLog/liveLog?type=2',true)">
                        <view class="shuListText"> 昨日观播人数 </view>
                        <view class="shuListNum"> {{ centerInfo?.yesterday_user_look }} </view>
                    </view>
                    <view class="shuListItem">
                        <view class="shuListText"> 本日新增会员 </view>
                        <view class="shuListNum"> {{ centerInfo?.toady_new_user }} </view>
                    </view>
                </view>
            </view>
            <view class="dayshuju">
                <view class="homeTitle flex flex-align">
                    <text></text>
                    会员数据
                </view>
                <view class="shuList flex flex-align">
                    <view class="shuListItem" @click="goUrl('/pagesA/shenhe/shenhe?type=1',true)">
                        <view class="shuListText"> 已通过会员 </view>
                        <view class="shuListNum"> {{ centerInfo?.auto_count1 }} </view>
                    </view>
                    <view class="shuListItem" @click="goUrl('/pagesA/shenhe/shenhe?type=2',true)">
                        <view class="shuListText"> 待审核会员 </view>
                        <view class="shuListNum"> {{ centerInfo?.auto_count2 }} </view>
                    </view>
                    <view class="shuListItem" @click="goUrl('/pagesA/shenhe/shenhe?type=3',true)">
                        <view class="shuListText"> 已拒绝会员 </view>
                        <view class="shuListNum"> {{ centerInfo?.auto_count3 }} </view>
                    </view>
                </view>
            </view>
        </view>
        <view class="centerGongju">
            <view class="centerGongjuHeader flex flex-align">
                <view class="centerGongjuHeaderText flex-1 flex flex-align flex-bt" @click="goUrl('/pagesA/userList/userList?type=1',true)">
                    <view class="flex flex-align">
                        <image class="img" src="/static/teamcenter/center02.png" mode="scaleToFill" />
                        <view class="titles">
                            <view class="wenzi">我的会员</view>
                            <view class="num">{{ centerInfo?.total_user_count }}</view>
                        </view>
                    </view>
                    <view class="imgicon">
                        <image src="/static/teamcenter/center03.png" mode="scaleToFill" />
                    </view>
                </view>
                <view class="centerGongjuHeaderText flex-1 flex flex-align flex-bt">
                    <view class="flex flex-align" @click="goUrl('/pagesA/redpacket/redpacket',true)">
                        <image class="img" src="/static/teamcenter/center04.png" mode="scaleToFill" />
                        <view class="titles">
                            <view class="wenzi">红包余额</view>
                            <view class="num">{{ datainfo?.balance3 }}</view>
                        </view>
                    </view>
                    <view class="imgicon">
                        <image src="/static/teamcenter/center03.png" mode="scaleToFill" />
                    </view>
                </view>
            </view>
            <view class="centerGongjuContent">
                <view class="homeTitle flex flex-align">
                    <text></text>
                    常用工具
                </view>
                <view class="gongjuList flex flex-align">
                    <view class="list flex-1" @click="goUrl('/pagesA/liveList/liveList',true)">
                        <image class="img" src="/static/teamcenter/center05.png" mode="scaleToFill" />
                        <view class="title"> 直播间 </view>
                    </view>
                    <view class="list flex-1" @click="goUrl('/pagesA/eidtshenqing/eidtshenqing',true)">
                        <image class="img" src="/static/teamcenter/center06.png" mode="scaleToFill" />
                        <view class="title"> 修改门店 </view>
                    </view>
                    <view class="list flex-1" @click="goUrl('/pagesA/shenhe/shenhe?type=2',true)">
                        <image class="img" src="/static/teamcenter/center07.png" mode="scaleToFill" />
                        <view class="title"> 用户审核 </view>
                    </view>
                    <view class="list flex-1" @click="goUrl('/pagesA/downLoad/downLoad',true)">
                        <image class="img" src="/static/teamcenter/center08.png" mode="scaleToFill" />
                        <view class="title"> 下载中心 </view>
                    </view>
                </view>
            </view>
        </view>
        <shareHaobao ref="shareHaobaoRef" img="/static/teamcenter/center03.png" />
    </view>

</template>

<script setup lang="ts">
import { computed, ref } from 'vue'
import API_CENTER from '@/api/teamcenter';
import { onLoad } from '@dcloudio/uni-app';
import { useUserStore } from '@/store/modules/user';
import shareHaobao from '../teamcenter/components/shareHaobao.vue'
import { goUrl } from '@/utils';
const userStore = useUserStore();
const datainfo = computed(() => userStore.userInfo)
const centerInfo = ref<Recordable>()
onLoad(() => {
    getInfo();

})

const getInfo = async () => {
    const res = await API_CENTER.getTeamInfo();

    centerInfo.value = res.info;
}
const shareHaobaoRef = ref<typeof shareHaobao>()
const openshare = () => {
    shareHaobaoRef.value?.open()
}

</script>

<style lang="scss" scoped>
.bg {
    background: url('@/static/teamcenter/centerBg.jpg');
    background-size: 100%;padding-bottom: 80rpx;
}
.content {
    height: 94vh;background: #fff;overflow: auto;
}
.teamHeader {
    padding: 40rpx 30rpx 10rpx;
    .teamHeaderLeft {
        image {
            width: 100rpx;
            height: 100rpx;
            border-radius: 100%;
            margin-right: 10rpx;
        }

        .teamHeaderLeftText {
            .name {
                font-size: 30rpx;
                font-weight: bold;
                // 文字颜色渐变
            }

            .num_list {
                font-size: 24rpx;
                color: #333;

                .list {
                    margin-right: 20rpx;
                    margin-top: 10rpx;
                    color: #767E9A;
                    background: rgba(255, 255, 255, 0.5);
                    padding: 5rpx 20rpx;
                    border-radius: 20rpx;
                    font-weight: 400;
                }
            }

        }

    }

    .teamHeaderRight {
        image {
            width: 60rpx;
            height: 60rpx;
        }
    }


}

.dayshuju {
    padding: 10rpx 30rpx;
    margin-top: 30rpx;

    .shuList {
        margin-top: 30rpx;

        .shuListItem {
            flex: 1;
            background: rgba(255, 255, 255, 0.5);
            border-radius: 20rpx;
            display: flex;
            flex-direction: column;
            justify-content: center;
            margin-right: 20rpx;
            height: 130rpx;
            padding: 0rpx 0 0 20rpx;
            border: 1rpx solid #fff;

            .shuListText {
                font-size: 28rpx;
                color: #959EB0;
            }

            .shuListNum {
                font-size: 32rpx;
                color: #323233;
            }

        }
        .shuListItem:last-child {
            margin-right: 0;
        }

    }
}
.centerGongju {
    padding:40rpx 30rpx 0;
    margin-top: -50rpx;
    border-radius: 30rpx 30rpx 0 0;
    background: #fff;
    .centerGongjuHeader {
        .centerGongjuHeaderText {
            flex: 1;
            border-radius: 20rpx;
            margin-right: 20rpx;
            background: #F5F6F9;
            padding: 30rpx 20rpx;

            .img {
                width: 70rpx;
                height: 70rpx;
                margin-right: 10rpx;
            }

            .titles {
                .wenzi {
                    font-size: 24rpx;
                    color: #959EB0;
                }

                .num {
                    font-size: 28rpx;
                    color: #323233;
                }

            }

            .imgicon {
                image {
                    width: 50rpx;
                    height: 50rpx;
                }
            }
        }

        .centerGongjuHeaderText:last-child {
            margin-right: 0;
        }

    }
}
.centerGongjuContent{
    margin-top: 30rpx;
    .gongjuList{
        margin-top: 30rpx;
        .list{
            flex: 1;
            text-align: center;
            padding: 20rpx 0;
            .img{
                width: 60rpx;
                height: 60rpx;
            }

        }

    }
}

</style>
